<template>
  <div :class="{'detail': true}">
    <el-row>
      <el-col>
        <span class="text">{{$t('cTransportSearch.type')}}: {{transportObj.transportType}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="14">
        <span class="text">{{$t('cTransportSearch.transportState')}}: </span>
        <span class="text" v-if="transportObj.state === 4" style="color: blue">{{$t(getState())}}</span>
        <span class="text" v-else-if="transportObj.state === 5" style="color: red">{{$t(getState())}}</span>
        <span class="text" v-else>{{$t(getState())}}</span>
      </el-col>
      <el-col :span="10">
        <span class="text">{{$t('cArroval.aog')}}: </span>
        <span style="color: red" v-if="transportObj.aog === 1">AOG</span>
        <span v-else>{{$t('cArroval.noAog')}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <span class="text">{{$t('cArroval.applyBatch')}}: </span>
        <span>{{transportObj.applyBatch}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <span class="text">{{$t('cArroval.applyDate')}}: </span>
        <span>{{transportObj.applicationTime.substring(0,16)}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="14">
        <span class="text">{{$t('cTransportSearch.start')}}: </span>
        <span>{{transportObj.startStation}}</span>
      </el-col>
      <el-col :span="10">
        <span class="text">{{$t('cTransportSearch.end')}}: </span>
        <span>{{transportObj.targetStation}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="last">
        <span class="text">{{$t('cTransportSearch.deliveryUnit')}}: </span>
        <span>{{transportObj.deliveryUnit}}</span>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="last">
        <span class="text">{{$t('cTransportSearch.receiveUnit')}}: </span>
        <span>{{transportObj.receiveUnit}}</span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { formatTime,approvalState } from "@/assets/js/common"
export default {
  name: '',
  // 组件属性、变量
  props: {
    transportObj: {
      type: Object,
      default() {
        return {}
      }
    },
    index: {
      type: Number,
      default: 0
    }
  },
  // 变量
  data() {
    return {}
  },
  // 方法
  methods: {
    getState() {
      let state = ''
      approvalState[0].forEach(item => {
        if(item.id === this.transportObj.state) state = item.name
      })
      return state
    }
  },
  // 生命周期函数
  created() {
  }
}
</script>

<style scoped>
.text {
  font-weight: bold;
}
.detail {
  margin: 2.778vw;
  padding: 1.389vw;
  border: 1px solid rgba(0, 0, 0, .3);
  font-size: 3.889vw;
  border-radius: 5px;
  background-color: white;
  box-shadow: 0 5px 5px -1px rgba(0, 0, 255, .1);
  overflow: hidden;
  opacity: 1;
}
.last {
  display: flex;
}
.last span:last-child {
  padding-left: 5px;
  flex: 1;
}
</style>
